<script setup>
import {
  SmoothStepEdge,
  EdgeLabelRenderer,
  getBezierPath,
  getSmoothStepPath,
  useVueFlow,
} from "@vue-flow/core";
import { computed, ref } from "vue";

const props = defineProps({
  id: { type: String, required: true },
  source: { type: String, required: true },
  target: { type: String, required: true },
  sourceX: { type: Number, required: true },
  sourceY: { type: Number, required: true },
  targetX: { type: Number, required: true },
  targetY: { type: Number, required: true },
  sourcePosition: { type: String, required: true },
  targetPosition: { type: String, required: true },
  markerEnd: { type: String, required: false },
  style: { type: Object, required: false },
});

const path = computed(() => getSmoothStepPath(props));
const showNodeTypes = ref(false);
const menuPosition = computed(() => ({
  x: path.value[1],
  y: path.value[2],
}));

const changeNodeTypeShow = (e) => {
  showNodeTypes.value = !showNodeTypes.value;
  console.log("e",e);
  emit("onChangeNodeTypeShow", {
    show: showNodeTypes.value,
    position: {
      x: e.clientX,
      y: e.clientY,
    },
    edge: props,
  });
};

const emit = defineEmits(["onAddNode", "onChangeNodeTypeShow"]);
</script>

<script>
export default {
  inheritAttrs: false,
};
</script>

<template>
  <SmoothStepEdge
    :id="id"
    :style="style"
    :path="path[0]"
    :marker-end="markerEnd"
  />

  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
      class="nodrag nopan"
      @click="changeNodeTypeShow"
    >
      <div class="edge-button-container">
        <button class="edgebutton">+</button>
      </div>
    </div>
  </EdgeLabelRenderer>
</template>

<style scoped>
.edge-button-container {
  position: relative;
}
</style>
